<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">购买订单</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>
		
		<!-- <view class="tabBox">
			<u-tabs activeStyle="color:#2C1769;font-size: 30upx;font-weight: 800;transform:scale(1.08)" :current="tabIndex"
			 inactiveStyle="color: #666;transition: all 0.5s;font-size: 30upx;transform:scale(1)"
			lineColor="#FE5400" lineWidth="32upx" itemStyle="height:72upx" :list="tabList" @change="tabListChange"></u-tabs>
		</view> -->
		<view class="uni-tab-content">
			<swiper class="swiper" :interval="2000" :duration="500" :autoplay="false" @change="swiperChange"
				 :current="tabIndex" >
				<swiper-item class="swiper-item" v-for="(val,i) in tabList" :key="i">
					<view class="swiper-box">
						<scroll-view scroll-y class="list" @scrolltolower="scrolltolower(1)">
							<view>
								<view class="acticities" @tap="seeDetails(item)" v-for="(item,index1) in val.list" :key="index1">
									<view class="order-number">
										<view class="orderId">订单: {{item.orderNo}}</view>
										<view v-show="item.orderType!=1">
											<view class="time" v-if="item.status==0">
												<text class="name">剩余时长</text>
												<text class="value">
													<u-count-down :time="item.countdown" format="mm:ss"
														@finish="finishFn(tabIndex,index1,item.status)">
													</u-count-down>
												</text>
											</view>
											<!-- 订单状态：0，未支付，1：已支付，2：已取消 -->
											<!-- 0：购买订单，1：空投订单，2：兑换订单，3：抽奖订单,4:半盲订单，5：盲盒兑换,6:烟花订单，7:烟花兑换订单，8：烟花合成9抢购 -->
											<view v-show="item.orderType==0">
												<view class="sgTxt" v-show="item.status == 1">
													<text class="name">已完成</text>
												</view>
												<view class="sgTxt" v-show="item.status == 2">
													<text class="name">已取消</text>
												</view>
											</view>
											<view v-show="item.orderType==9">
												<view class="sgTxt" v-show="item.status == 1">
													<text class="name" v-show="item.isPrize == 1">已完成</text>
													<text class="name" v-show="item.isPrize == 0">未中签</text>
													<text class="name" v-show="item.isPrize == 2">抢购中</text>
												</view>
												<view class="sgTxt" v-show="item.status == 2">
													<text class="name">已取消</text>
												</view>
											</view>
										</view>
										<view class="sgTxt" v-show="item.orderType==1">
											<text class="name">{{item.status == 1?"已完成":"已取消"}}</text>
										</view>
									</view>
									<view class="show-box">
										<view class="fileBox">
											<image v-if="isImage(item.fileUrl)"
												:src="pathImg+item.fileUrl+'?x-oss-process=image/format,png'"
												mode="widthFix">
											</image>
											<image v-else :src="pathImg+item.fileUrl+'?x-oss-process=video/snapshot,t_20,f_jpg'"
												mode="widthFix" class="img">
											</image>
										</view>
										<view class="goods_info">
											<view class="first-line">
												{{item.collectionName}}
											</view>
											<view class="price" v-if="item.orderType!=1">
												<text>￥{{item.payTotal}}</text>
												<view v-show="item.status == 0">待付款</view>
											</view>
											<view class="price" v-else>
												<text>空投</text>
												<view v-show="item.status == 1 && item.orderType == 9 && item.isPrize == 0">
													{{item.refundStatus==1?"，退款成功":"，待退款"}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view v-if="val.list.length == 0">
								<view class="noData">
									<image class="noDataImg" src="../../static/noData.png" mode=""></image>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		nftorderList
	} from '../../api/user.js'
	import {
		getUser
	} from '@/api/login.js'
	export default {
		data() {
			return {
				tabIndex:0,
				tabList: [
					{name:"全部",list:[],status:""},
					// {name:"已完成",list:[],status:"1"},
					// {name:"已取消",list:[],status:"2"},
				],
				listQuery: {
					pages: 0,
					page: 1,
					pageSize: 10,
					orderNo: '',//订单编号
					status: '1',//订单状态：0，未支付，1：已支付，2：已取消,传空默认查全部
					orderType:"",//订单类型： 1抢购订单，2：抢购订单
				},//抢购，抢购订单
			};
		},
		onShow() {
			this.getOrderList();
		},
		methods: {
			seeDetails(cur){
				uni.navigateTo({
					url:`/pages/user/orderDetails?id=${cur.id}&type=1`
				});
			},
			tabListChange(e){//tab切换
				this.tabIndex = e.index;
				this.listQuery.page = 1;
				this.listQuery.status = e.status;
				this.listQuery.pages = 1;
				this.getOrderList();
			},
			swiperChange(e){
				let current = e.detail.current;
				if(this.tabIndex != current){
					this.listQuery.status = current == 0 ?"":current;
					this.tabIndex = current;
					this.listQuery.page = 1;
					this.listQuery.pages = 1;
					this.getOrderList();
				}
			},
			// 判断这个地址是视频还是图片
			isImage(url) {
				if (!url) {
					return
				}
				let filePath = url.toLocaleLowerCase();
				if (filePath.indexOf(".mp4") != -1) {
					return false;
				} else {
					return true;
				}
			},
			finishFn(i,index, status) {
				// i  0，全部，1：已完成，2：已取消
					// 订单状态：0，未支付，1：已支付，2：已取消
				if (status == 0) {
					this.tabList[i].list[index].status = 2;
				}
			},
			toShopping(i,item) {
				let url = '/pages/detail/confirmOrder?id=' + item.id;
				if(i == 2){
					url += "&path=resale";
				}
				uni.navigateTo({
					url
				});
			},
			getOrderList() {//抢购，抢购订单
				this.$nextTick(()=>{
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				nftorderList(this.listQuery).then(res => {
					if (res.data.success) {
						let list = res.data.obj.list;
						this.listQuery.pages = res.data.obj.pages;
						if (list.length == 0) {
							return;
						}
						
						let newList = list.filter((item, index) => {
							// if(item.orderType == 0){
							// 	item["orderTypeT"] = "发售";
							// }else if(item.orderType == 1){
							// 	item["orderTypeT"] = "空投";
							// }else if(item.orderType == 9){
							// 	item["orderTypeT"] = "抢购";
							// }
							if(item.endDate){
								item.countdown = this.moment(item.endDate).diff(new Date().getTime())
							}
							if(item.isPrize || item.isPrize == 0){
								if(item.isPrize == 0){
									item["isPrizeT"] = "未中签";
								}else if(item.isPrize == 1){
									item["isPrizeT"] = "已中签";
								}else{
									item["isPrizeT"] = "抢购中";
								}
							}
							return item;
						});
						
						if (this.listQuery.page == 1) {
							this.tabList[this.tabIndex].list = [...newList];
						} else {
							this.tabList[this.tabIndex].list = [...this.tabList[this.tabIndex].list,...newList];
						}
					}else{
						
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			scrolltolower(i) {
				if(this.listQuery.pages > this.listQuery.page){
					this.listQuery.page++;
					this.getOrderList();
				}else{
					// this.isEnd = true;
				}
			},
			back() {
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			}
		},
	}
</script>

<style lang="less" scoped>
	page{width: 100%;height: 100%;}
	.con-box {
		padding-top: 120upx;
		width: 100%;
		height: 100%;
		.tabBox{
			width: 100%;
			padding:0upx 10upx;
			margin-top: 20upx;
		}
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
		.uni-tab-content {
			width: 100%;
			// height: calc(100% - 100upx);
			height: 100%;
			.swiper{
				width: 100%;
				height: 100%;
				.swiper-item{
					width: 100%;
					height: 100%;
				}
			}
			
			.swiper-box {
				width: 100%;
				height: 100%;
				padding-bottom: 20upx;
				.noData{
					position: absolute;
					width: 220upx;
					height: 180upx;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					.noDataImg{
						width: 220upx;
						height: 180upx;
					}
				}
				.list {
					height: 100%;
					width: 100%;
					padding-top: 30upx;
					.acticities {
						width: 100%;
						height: auto;
						background: #fff;
						padding: 0 30upx;
						margin-bottom: 20upx;
						padding-bottom: 30upx;
						.order-number {
							width: 100%;
							display: flex;
							justify-content: space-between;
							font-size: 24upx;
							padding-top: 30upx;
							padding-bottom: 20upx;
							margin-bottom: 30upx;
							border-bottom: 1px solid #F7F7F7;
							.orderId {
								flex: 1%;
								padding-right: 30upx;
								line-height:24upx;
								text-align: left;
								color: #333;
								overflow:hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								-o-text-overflow:ellipsis;
							}
							.sgTxt{
								text-align: right;
								color: #2C1769;
								line-height: 24upx;
							}
							
							.time {
								display: flex;
								align-items: center;
								justify-content: flex-end;
								width: 200upx;
								.name {
									font-family: PingFang SC;
									font-style: normal;
									font-weight: normal;
									font-size: 22upx;
									line-height: 24upx;
									color: #333;
									mix-blend-mode: normal;
									opacity: 0.4;
									margin-right: 12upx;
								}

								.value {
									font-family: PingFang SC;
									font-style: normal;
									font-weight: 600;
									mix-blend-mode: normal;

									/deep/.u-count-down__text {
										font-size: 24upx;
										line-height: 24upx;
										color: #DBB44E;
									}
								}
							}
						}

						.show-box{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							.fileBox{
								width: 160upx;
								height: 160upx;
								display: flex;
								align-items: center;
								justify-content: center;
								image {
									width: 100%;
								}
							}
							.goods_info{
								padding-left: 18upx;
								flex: 1%;
								display: flex;
								flex-wrap: wrap;
								align-content: space-between;
								height: 160upx;
								.first-line{
									width: 100%;
									font-size: 24upx;
									color: #111;
								}
								.price{
									width: 100%;
									color: #EB5703;
									font-size: 30upx;
									display: flex;
									justify-content: space-between;
									align-items: center;
								}
							}
						}
					}
				}
			}
		}
	}
</style>